<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
</body>
<script>
    const person = {
        name: '张三',
        age: 88,
        layer1: {
            layer2: {
                layer3: '你好'
            }
        }
    }

    const personProxy = new Proxy(person, {
        /**
         * 当代理对象上的属性被读取时触发 get 方法，并传入两个参数：
         * target: 目标对象
         * prop: 被读取的属性名
        */
        get(target, prop, receiver) {
            console.log(`person 对象上的 ${prop} 被读取了`)
            return Reflect.get(target, prop)
        },

        /**
         * 当代理对象上的属性被修改，或者添加属性时触发 set 方法，并传入三个参数
         * target: 目标对象
         * props: 被修改的属性名
         * value: 修改的值
         */
        set(target, prop, value) {
            console.log(`person 对象上的 ${prop} 被修改了`);
            Reflect.set(target, prop, value)
        },

        deleteProperty(target, prop) {
            console.log(`erson 对象上的 ${prop} 被删除了`);
            return Reflect.defineProperty(target, prop)
        }
    })
</script>

</html>